<template>
  <div style="margin: 0 auto">
    <el-row :gutter="10">
      <el-col :span="12" :offset="6">

        <div style="text-align: center;padding: 10px">《{{faultInfo.name }}》-详情信息</div>
        <div style="margin: 10px auto;text-align: center">
          <el-button type="primary" size="mini"  @click="timeLineVisible=true" align="center">任务时间轴</el-button>
          <el-button type="primary" size="mini" v-if="this.faultInfo.status==0"
                     @click="distributionPerson()" align="center">分配人员
          </el-button>
<!--          <el-button type="primary" size="mini" v-if="this.faultInfo.status==1" @click="confirm()"
                     align="center">确认收到工单
          </el-button>-->
<!--            <el-button type="primary" size="mini" v-if="this.faultInfo.status==3" @click="toMaintenanceWorkOrder()"
                       align="center">需要维保公司介入
            </el-button>-->
<!--          <el-button type="primary" size="mini" v-if="this.faultInfo.status==2" @click="startExecute()"
                     align="center">到场确认
          </el-button>-->
<!--          <el-button type="primary" size="mini" v-if="this.faultInfo.status==5" @click="confirmButton()" align="center">已完成工单
          </el-button>-->





          <el-button type="primary" size="mini" v-if="this.faultInfo.status==4" @click="examine()"
                     align="center">审核整改时间
          </el-button>
          <el-button type="primary" size="mini"
                     v-if="this.faultInfo.status>=3&&this.faultInfo.status==3"
                     @click="returnWorkOrder()" align="center">退回工单
          </el-button>
          <el-button type="primary" size="mini" v-if="this.faultInfo.status==5" @click="examineConfirm()"
                     align="center">工单合格，准许完成
          </el-button>
        </div>
        <el-dialog  title="故障工单时间轴"  :visible.sync="timeLineVisible">
          <el-timeline :reverse="true">
            <el-timeline-item
                v-for="(activity, index) in faultInfo.logList"
                :key="index"
                :timestamp="activity.feedBackTime|dateFormat">
              <p>{{ activity.content }}</p>
            </el-timeline-item>
          </el-timeline>
        </el-dialog>
        <div style="width: 100%" v-if="show">
          <el-form :model="personForm" ref="personForm" label-width="150px">
            <el-form-item label="执行人员" prop="executePerson">
              <el-select v-model="personForm.executePerson" placeholder="请选择执行人员" style="width:100%">
                <el-option v-for="(item,index) in userList" :key="index" :value="item.ucId"
                           :label="item.name"></el-option>
              </el-select>
            </el-form-item>
            <div align="center">
              <el-button type="primary" @click="updateUser">确定</el-button>
            </div>
          </el-form>
        </div>
        <div style="width: 100%" v-if="show1">
          <el-form :model="feedBackForm" ref="feedBackForm" label-width="150px">
            <el-form-item label="整改时间" prop="feedbackTime">
              <el-date-picker
                  v-model="feedBackForm.feedbackTime"
                  type="datetime"
                  placeholder="选择日期时间"
                  style="width: 100%">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="反馈描述" prop="feedbackRemark">
              <el-input v-model="feedBackForm.feedbackRemark" placeholder="请输入反馈描述" style="width: 100%"></el-input>
            </el-form-item>
            <div align="center">
              <el-button type="primary" @click="feedbackConfirm">确定</el-button>
            </div>
          </el-form>
        </div>
        <div style="width: 100%" v-if="show2">
          <el-form :model="examineForm" ref="examineForm" label-width="150px">
            <el-form-item label="指定时间" prop="examineTime">
              <el-date-picker
                  v-model="examineForm.examineTime"
                  type="datetime"
                  placeholder="选择日期时间"
                  style="width: 100%">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="审核意见" prop="examineOpinion">
              <el-input v-model="examineForm.examineOpinion" placeholder="请输入审核意见"
                        style="width: 100%"></el-input>
            </el-form-item>
            <div align="center">
              <el-button type="primary" @click="continueRectification">确定</el-button>
            </div>
          </el-form>　
        </div>
        <div style="width: 100%" v-if="show3">
          <el-form :model="confirmForm" ref="confirmForm" label-width="150px">
            <el-form-item label="工单完成状况图片" prop="completeUrl">
              <el-upload
                  class="avatar-uploader"
                  :headers="headers"
                  :action="uploadImg"
                  :data="{type:'avatar'}"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload">
                <img v-if="confirmForm.completeUrl&& imgFlag == false" :src="confirmForm.completeUrl"
                     class="avatar">
                <i v-else-if="!confirmForm.completeUrl&& imgFlag == false"
                   class="el-icon-plus avatar-uploader-icon"></i>
                <el-progress v-if="imgFlag == true" type="circle" :percentage="imgUploadPercent"
                             style="margin-top:30px;"></el-progress>
              </el-upload>
            </el-form-item>
            <div align="center">
              <el-button type="primary" @click="continueExecute">确定</el-button>
            </div>
          </el-form>　
        </div>
        <el-form :model="faultInfo" ref="faultInfo" label-width="150px">
          <el-form-item prop="completeUrl" v-if="faultInfo.completeUrl!=null">
            <el-image
                style="width: 150px; height: 250px"
                :src="faultInfo.completeUrl"
                fit="fill" :preview-src-list="[faultInfo.completeUrl]">>
            </el-image>
            <div style="line-height: 44px">隐患处置完成图片</div>
          </el-form-item>
          <el-form-item label="工单名称:" prop="name">
            {{ faultInfo.name }}
          </el-form-item>
          <el-form-item label="地点:" prop="address">
            {{ faultInfo.address }}
          </el-form-item>
          <el-form-item label="详情描述:" prop="remark">
            {{ faultInfo.remark }}
          </el-form-item>
          <el-form-item label="上报人:" prop="reportPersonName">
            {{ faultInfo.reportPersonName }}
          </el-form-item>
          <el-form-item label="上报时间:" prop="reportTime">
            {{ faultInfo.reportTime |dateFormat }}
          </el-form-item>
          <el-form-item label="执行人:" prop="executePersonName">
            {{ faultInfo.executePersonName==null?"暂未分配人员":faultInfo.executePersonName }}
          </el-form-item>
          <el-form-item label="整改时间:" prop="feedbackTime">
            {{ faultInfo.feedbackTime  | dateFormat }}
          </el-form-item>
          <el-form-item label="反馈描述:" prop="feedbackRemark">
            {{ faultInfo.feedbackRemark }}
          </el-form-item>
            <el-form-item label="审核时间:" prop="examineTime">
                {{ faultInfo.examineTime }}
            </el-form-item>
            <el-form-item label="审核意见:" prop="examineOpinion">
                {{ faultInfo.examineOpinion }}
            </el-form-item>
          <!--        <el-form-item label="审核状态:" prop="examineStatus">-->
          <!--          {{ faultInfo.examineStatus }}-->
          <!--        </el-form-item>-->
          <el-form-item label="工单状态:" prop="status">
            {{ faultInfo.status | stateWorkOrder }}
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
    getInWorkOrderVo,
    assignPeople,
    startChangeStatus,
    confirmWorkOrder,
    communicationNeeds,
    confirmEndChangeStatus,
    workOrderContinueToRectify,
    orderUltimateEnd,
    workOrderReturn,
    workOrderWaitingForReview,
    toMaintenanceWorkOrder,
    communicate,
    communicationFinishBecomeContinue,
} from "@/api/workOrder";
import {getInUserList} from "@/api/enterprise";
import {getToken} from "@/utils/auth";
import {uploadImg} from "@/api/common";

export default {
  name: "recordsInfo",
  data() {
    return {
        timeLineVisible: false,
        faultInfo: {},
        personForm: {},
        feedBackForm: {},
        examineForm: {},
        confirmForm: {
            completeUrl: '',
        },
        communicateForm: {},
        userList: [],
        show: false,
        show1: false,
        show2: false,
        show3: false,
        show4: false,
        uploadImg,
        imgFlag: false,
        imgUploadPercent: 0,



    }
  },
  computed: {
    headers() {
      return {
        'Authorization': getToken()
      }
    },
  },
  created() {
    this.$nextTick(() => {
      this.getInWorkOrderVo(this.$route.query.ucId)
    });
    this.personForm.ucId = this.$route.query.ucId
    this.feedBackForm.ucId = this.$route.query.ucId
    this.examineForm.ucId = this.$route.query.ucId
    this.confirmForm.ucId=this.$route.query.ucId
    this.communicateForm.workOrderId=this.$route.query.ucId
  },
  methods: {
    handleAvatarSuccess(res, file) {
      //图片上传成功
      console.log(res)
      this.imgFlag = false;
      this.confirmForm.completeUrl = res.data;
      console.log(this.confirmForm.completeUrl)
    },
    uploadImgProcess(event, file, fileList) {
      this.imgFlag = true;
      this.imgUploadPercent = file.percentage.toFixed(0);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    cancelWorkOrder() {
      window.history.back()
    },
    getInWorkOrderVo(val) {
      let loadingInstance = this.$loading({
        target: this.$refs.content,
        text: '数据加载中'
      });
      getInWorkOrderVo({ucId: val}).then(res => {

        console.log(res)
        this.faultInfo = res.data

        this.getInUserList(res.data.enterpriseId)

        loadingInstance.close()
        this.$notify.success({
          title: '成功',
          message: "获取工单成功"
        })

      }).catch(error => {
        console.log(error)
        loadingInstance.close()
        this.$notify.error({
          title: '失败',
          message: "获取用户信息失败"
        })
      })
    },
    //分配人员
    distributionPerson() {
      this.show = true
    },
    //确认收到
    confirm() {
      confirmWorkOrder({ucId: this.$route.query.ucId}).then(res => {
        this.$notify.success({
          title: '成功',
          message: "确认工单完成"
        })
        this.getInWorkOrderVo(this.$route.query.ucId)
        this.show = false
      }).catch(error => {
        this.$notify.error({
          title: '失败',
          message: "失败"
        })
      })
    },
    //开始执行
    startExecute() {
      startChangeStatus({ucId: this.$route.query.ucId}).then(res => {
        this.$notify.success({
          title: '成功',
          message: "开始执行"
        })
        this.getInWorkOrderVo(this.$route.query.ucId)
      }).catch(error => {
        this.$notify.error({
          title: '失败',
          message: "失败"
        })
      })
    },
      //故障 转维保
    toMaintenanceWorkOrder(){
        toMaintenanceWorkOrder({ucId: this.$route.query.ucId}).then(res => {
            this.$notify.success({
                title: '成功',
                message: "已转维保工单"
            })
            this.getInWorkOrderVo(this.$route.query.ucId)
        }).catch(error => {
            this.$notify.error({
                title: '失败',
                message: "失败"
            })
        })
    },
    //反馈
    feedback() {
      console.log("反馈")
      this.show1 = true
    },
    //反馈确认按钮
    feedbackConfirm() {
      communicationNeeds(this.feedBackForm).then(res => {
        this.$notify.success({
          title: '成功',
          message: "开始执行"
        })
        this.getInWorkOrderVo(this.$route.query.ucId)
        this.show1 = false
        this.feedBackForm = {}
      }).catch(error => {
        this.$notify.error({
          title: '失败',
          message: "失败"
        })
      })
    },
    confirmButton() {
      this.show3=true
    },
    //确认完成
    confirmComplete() {
      confirmEndChangeStatus({ucId: this.$route.query.ucId}).then(res => {
        this.$notify.success({
          title: '成功',
          message: "确认完成"
        })
        this.getInWorkOrderVo(this.$route.query.ucId)
        this.show3=false
        this.confirmForm={}
      }).catch(error => {
        this.$notify.error({
          title: '失败',
          message: "失败"
        })
      })
    },
    //审核
    examine() {
      this.show2 = true
    },
    //审核确认按钮
    examineConfirm() {
      orderUltimateEnd({ucId:this.$route.query.ucId}).then(res => {
        this.$notify.success({
          title: '成功',
          message: "审核完成"
        })
        this.getInWorkOrderVo(this.$route.query.ucId)
        this.show2 = false
        this.examineForm = {}
      }).catch(error => {
        this.$notify.error({
          title: '失败',
          message: "失败"
        })
      })
    },
    //
    continueRectification() {
      workOrderWaitingForReview(this.examineForm).then(res => {
        this.$notify.success({
          title: '成功',
          message: "已审核完成"
        })
        this.getInWorkOrderVo(this.$route.query.ucId)
        this.show2 = false
        this.examineForm = {}
      }).catch(error => {
        this.$notify.error({
          title: '失败',
          message: "失败"
        })
      })
    },
    continueExecute() {
      workOrderContinueToRectify(this.confirmForm).then(res => {
        this.$notify.success({
          title: '成功',
          message: "审核完成"
        })
        this.getInWorkOrderVo(this.$route.query.ucId)
        this.show3 = false
        this.confirmForm = {}
      }).catch(error => {
        this.$notify.error({
          title: '失败',
          message: "失败"
        })
      })
    },
    returnWorkOrder() {
      workOrderReturn({ucId: this.$route.query.ucId}).then(res => {
        this.$notify.success({
          title: '成功',
          message: "已退回"
        })
        this.getInWorkOrderVo(this.$route.query.ucId)

      }).catch(error => {
        this.$notify.error({
          title: '失败',
          message: "失败"
        })
      })
    },
    updateUser() {
      assignPeople(this.personForm).then(res => {
        this.$notify.success({
          title: '成功',
          message: "分配人员成功"
        })
        this.getInWorkOrderVo(this.$route.query.ucId)
        this.show = false
      }).catch(res => {
        this.$notify.error({
          title: '失败',
          message: res.msg
        })
      })
    },

    getInUserList(val) {
      getInUserList({deleted: false, flagId: val}).then(res => {
        this.userList = res.data
      }).catch(error => {

      })
    },


  }

}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 149px;
  height: 149px;
  line-height: 149px;
  text-align: center;
}
.avatar {
  width: 149px;
  height: 149px;
  display: block;
}
</style>